import * as actionCreators from './store/actionCreators';
import * as React from 'react';
import {CSSTransition} from 'react-transition-group';
import {BrowserRouter, Link} from 'react-router-dom';
import {connect} from "react-redux";
import {
    Addition,
    Button,
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    SearchInfo,
    SearchInfoItem,
    SearchInfoList,
    SearchInfoSwitch,
    SearchTitle,
    SearchWrapper
} from './style';

// interface IHeaderState {
//     focused: boolean
// }

interface IHeaderProps {
    list: any,
    focused: boolean,
    mouseIn: boolean,
    page: number,
    totalPage: number,

    // 搜索框获得焦点
    handleInputFocus(list: object):void,
    // 搜索框失去焦点
    handleInputBlur(): void,

    // 感兴趣区域获得鼠标
    handleMouseEnter(): void,

    // 感兴趣区域失去鼠标
    handleMouseLeave(): void,

    // 切换高兴趣标签内容
    handleChange(page:number, totalPage:number, spinIcon:React.RefObject<HTMLElement>):void
}

class Header extends React.Component<IHeaderProps, {}> {
    private spinIcon: React.RefObject<HTMLElement>;

    constructor(props: any) {
        super(props);
        this.spinIcon = React.createRef();
    }
    // 感兴趣的标签区域
    public getListArea(): any {
        const {focused, mouseIn, list, page, totalPage, handleMouseEnter, handleMouseLeave,handleChange} = this.props;
        const newList = list.toJS(); // 将immutable对象转为Js对象
        const pageList = [];

        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                if (!newList[i]) {
                    continue;
                }
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }

        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <SearchTitle>
                        热门搜索
                    </SearchTitle>
                    <SearchInfoSwitch
                        onClick={() => handleChange(page, totalPage, this.spinIcon)
                        }
                    >
                        <i ref={this.spinIcon} className="iconfont spin">&#xe60e;</i>
                        换一批
                    </SearchInfoSwitch>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList>
                </SearchInfo>
            )
        } else {
            return null;
        }
    }
    public render() {
        const {focused, handleInputFocus, handleInputBlur, list} = this.props;
        return (
            <HeaderWrapper>
                <BrowserRouter>
                    <Link to='/'>
                        <Logo/>
                    </Link>
                </BrowserRouter>
                <Nav>
                    <NavItem className={'left'}>
                        首页
                    </NavItem>
                    <NavItem className={'left'}>
                        下载app
                    </NavItem>
                    <BrowserRouter>
                        <Link to='/login'><NavItem className={'right'}>登录</NavItem></Link>
                    </BrowserRouter>
                    {/*{
                        login ?
                            <NavItem className={'right'} onClick={logout} style={{'cursor':'pointer'}}>退出</NavItem> :
                            <Link to='/login'><NavItem className={'right'}>登录</NavItem></Link>
                    }*/}
                    <NavItem className={'right'}>
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            in={focused}  // 开始的条件y
                            timeout={500} // 过度时间
                            classNames={'slide'}
                        >
                            <NavSearch
                                className={focused ? 'focused' : ''}
                                onFocus={() => handleInputFocus(list)}
                                onBlur={handleInputBlur}
                            />
                        </CSSTransition>
                        <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe644;</i>
                        {this.getListArea()}
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <BrowserRouter>
                        <Link to='/write'>
                            <Button className={'writting'}>
                                <i className="iconfont">&#xe6be;</i>
                                写文章</Button>
                        </Link>
                    </BrowserRouter>
                    <Button className={'reg'}>注册</Button>
                </Addition>
            </HeaderWrapper>
        )
    }
}

const mapStateToProps = (state: any) => {
    return {
        // totalPage: state.get('header').get('totalPage')
        focused: state.getIn(['header','focused']),
        mouseIn: state.getIn(['header','mouseIn']),
        list: state.getIn(['header','list']),
        page: state.getIn(['header','page']),
        totalPage: state.getIn(['header','totalPage'])
    }
};

const mapDispatchToProps = (dispatch: any) => ({
    handleInputFocus(list: any) {
        console.log('===list===');
        console.log(list);
        if (list.size === 0) {
            dispatch(actionCreators.getList());
        }
        dispatch(actionCreators.searchFocus());
    },
    handleInputBlur() {
        dispatch(actionCreators.searchBlur())
    },
    handleMouseEnter() {
        dispatch(actionCreators.mouseEnter());
    },
    handleMouseLeave() {
        dispatch(actionCreators.mouseLeave())
    },
    handleChange(page:number, totalPage:number, spin:any) {
        let originAngle = spin.current.style.transform.replace(/[^0-9]/ig, '');
        if (originAngle) {
            originAngle = parseInt(originAngle, 10);
        } else {
            originAngle = 0;
        }
        spin.current.style.transform = 'rotate(' + (originAngle + 180) + 'deg)';
        if (page < totalPage) {
            dispatch(actionCreators.changePage(page + 1))
        } else {
            dispatch(actionCreators.changePage(1))
        }
    },
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);